// 用面向对象的思想来写
//  找一个能生产选项卡的机器  
// 生产出两个对象 
// 每个对象能制造选项卡  


// 面向过程 
// 1.获取元素  按钮  内容区域
// 2. 给谁绑定事件  
// 3. 给谁添加或者取消class


// 没有机器自己造 

// 需要的是 
// 属性 按钮 和 内容区域
// 方法 绑定事件 给谁添加class 删除class


function HandleTabs(selector){
    //属性 
    // ul
    // ol 
    this.ele = document.querySelector(selector);
    this.btns = this.ele.querySelectorAll('ul > li');// 每个区域的按钮
    this.boxs = this.ele.querySelectorAll('ol > li');// 每个区域的显示内容区域

    this.init();

}


// // {
//     i
//     btn[i] {
//         console.log(init)
//     }
// }
HandleTabs.prototype.init = function(){
    //遍历每个按钮
    for(let i=0;i<this.btns.length;i++){
        var nums = this.btns.length
        var eles = this.btns;
        this.btns[i].onclick = function(){
            console.log(this);
            for(let j=0;j<nums;j++){
                eles[j].className = '';
                eles[j].classList = '';

            }
            this.className = 'active';
            this.className = 'active'

        }
    }
}


const t1 = new HandleTabs('#box1');
// t1.init();
const t2 = new HandleTabs('#box2')
// t2.init();


//上面完成了效果 


// 让用户决定绑定什么事件 用户不传 默认就是click

